﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文件上传</title>
    <script src="/js/lib/jquery.js"></script>
	<style>
	.uploadDiv{	
	background-color:#eee;
	border:1px solid #ddd;
	border-radius:5px;
	cursor:pointer;
	}
	.alert {
    margin: 3px 0px;
    border: 1px solid #f9d689;
    background-color: #fff5e0;
    padding: 5px;
    color: #e67802;
    font-size: 14px;
}
	</style>
</head>
<body>
    <div class="content">
	
	<div id="upload">
	<div class="uploadDiv" >
	 <table>
	 <tr>
	 <td style="width:50px;text-align:right;"><span style="color:#ccc;font-size:80px;font-weight:bold;">+<span></td>
	 <td>
	 <span style="display:block;color:#aaa;font-size:14px;margin-top:15px;">*支持批量上传（最多一次性20个文件）</span>
	 <span style="display:block;color:#aaa;font-size:14px;">*仅支持格式:.jpg,.jpeg,.png,.gif</span>
	 <span style="display:block;color:#aaa;font-size:14px;">*单文件大小不要超过1M</span>
	 <span style="display:block;color:#aaa;font-size:14px;">*图片宽度最好400px以上</span>
	 </td>
	 </tr>
	 </table>
	 </div>
	</div>
	
	<div id="msg" class="alert alert-success">* 还未选择需要上传文件，请选择</div>
	
	<div id="submitBtn" onclick="Upload()" style="padding:8px;text-align:center;background-color:#037d08;cursor:pointer;display:none;">
      <span  style="cursor:pointer;color:#fff;">开始上传</span>
    </div>
	
	
    <div style="display:none;">
        请选择上传文件1:
        <input type="file" id="upload1" multiple="true" />
	</div>
	
    </div>
    <script type="text/javascript">
	    $(function(){
			$(".uploadDiv").click(function(){		     
			  $("#upload1").click();
			});
			
			$("#upload1").change(function(){
			    console.log($("#upload1")[0].files);
			    $("#msg").text("* 还未选择需要上传文件，请选择");
				$("#submitBtn").hide();
                if($("#upload1").val()==""||$("#upload1")[0].files.length==0){alert("请选择要上传的图片"); return;}
				if($("#upload1")[0].files.length>20){alert("一次性上传图片不要超过20张"); return;}
                for(i=0;i<$("#upload1")[0].files.length;i++){
				  var t=$("#upload1")[0].files[i];
				  var fileName=t.name;
				  var filteType=t.name.split(".")[1].toLowerCase();
				  var fileSize=t.size;
				  if(filteType!="jpg"&&filteType!="jpeg"&&filteType!="png"&&filteType!="gif"){
				    alert("文件:"+fileName+"的格式不支持上传.");
					$("#upload1").val()="";
					return;
				  }
				  if(fileSize/1024>1000){
				    alert("文件:"+fileName+"的大小超过1M.");
					$("#upload1").val()="";
					return;
				  }
				}				
                $("#msg").text("* 已选择："+$("#upload1")[0].files.length+"个文件");
				$("#submitBtn").show();
			});
		});
		
		
		function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
		
		
        function Upload(){
		var p = GetQueryString("params").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&").replace("|", "&");
        var url = "/admin/upload?"+p;
        var formData = new FormData();
		for(i=0;i<$("#upload1")[0].files.length;i++){
         formData.append("inputFile", $("#upload1")[0].files[i]);
		}           
        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            beforeSend: function () {
			    $("#msg").text("文件上传中，请耐心等待...");
				$("#submitBtn").hide();
            },
            success: function (response) {                             
                 if(response) $("#msg").text("选择的文件已上传成功!");  
				 else  $("#msg").text("文件上传失败!");
            },
            error: function (responseStr) {
               $("#msg").text("文件上传错误!");
            }
        });
    }
        
    </script>
</body>
</html>
